<template>
  <view class="delivery-detail">
    <!-- 物流公司信息 -->
    <view class="delivery-info">
      <view class="company">
        <text>物流公司: </text>
        <text>{{deliveryInfo.company}}</text>
      </view>
      <view class="number">
        <text>物流单号: </text>
        <text>{{deliveryInfo.number}}</text>
      </view>
      <view class="copy-btn" @click="copyNumber">复制单号</view>
    </view>
    
    <!-- 物流轨迹 -->
    <view class="delivery-track">
      <view class="track-title">物流轨迹</view>
      <view class="track-list">
        <view class="track-item" v-for="(item, index) in deliveryInfo.list" :key="index">
          <view class="track-line" :class="{first: index === 0, last: index === deliveryInfo.list.length - 1}"></view>
          <view class="track-dot" :class="{active: index === 0}"></view>
          <view class="track-content">
            <view class="track-status">{{item.status}}</view>
            <view class="track-time">{{item.time}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      deliveryInfo: {
        company: '顺丰速运',
        number: 'SF1234567890',
        list: [
          {
            status: '已签收，签收人：本人',
            time: '2023-05-22 14:30:25'
          },
          {
            status: '派送中，快递员：张三 电话：13800138000',
            time: '2023-05-22 09:15:10'
          },
          {
            status: '已到达【深圳南山科技园分部】',
            time: '2023-05-21 18:20:45'
          },
          {
            status: '已从【深圳转运中心】发出',
            time: '2023-05-20 22:10:30'
          },
          {
            status: '已揽收',
            time: '2023-05-20 16:45:12'
          }
        ]
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      // 实际项目中这里应该根据订单ID请求API获取物流信息
      // 这里使用模拟数据
      this.getDeliveryInfo(options.id)
    }
  },
  methods: {
    getDeliveryInfo(id) {
      // 模拟根据订单ID获取物流信息
      this.deliveryInfo.number = 'SF' + id.slice(-10)
    },
    copyNumber() {
      uni.setClipboardData({
        data: this.deliveryInfo.number,
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'success'
          })
        }
      })
    }
  }
}
</script>

<style>
.delivery-detail {
  padding: 30rpx;
}
.delivery-info {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}
.company,
.number {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
}
.copy-btn {
  display: inline-block;
  padding: 8rpx 30rpx;
  background-color: #ff2d4a;
  color: #fff;
  font-size: 24rpx;
  border-radius: 30rpx;
}
.delivery-track {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
}
.track-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 30rpx;
}
.track-list {
  position: relative;
  padding-left: 60rpx;
}
.track-item {
  position: relative;
  padding-bottom: 40rpx;
}
.track-line {
  position: absolute;
  left: 20rpx;
  top: 0;
  width: 2rpx;
  height: 100%;
  background-color: #e0e0e0;
}
.track-line.first {
  top: 20rpx;
}
.track-line.last {
  height: 20rpx;
}
.track-dot {
  position: absolute;
  left: 10rpx;
  top: 20rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #e0e0e0;
}
.track-dot.active {
  background-color: #ff2d4a;
}
.track-content {
  position: relative;
  padding-left: 20rpx;
}
.track-status {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}
.track-time {
  font-size: 24rpx;
  color: #999;
}
</style>